<template>
    <div v-for="item in list" :key="item.id">
        <div class="title">
            <el-checkbox @change="checkAll(item)" v-model="item.checkAll" :indeterminate="item.indeterminate">{{
                    item.name
            }}
            </el-checkbox>
        </div>
        <div class="group">
            <el-checkbox-group @change="change(item)" v-model="item.checkedIds">
                <div class="item" v-for="child in item.children" :key="child.id">
                    <el-checkbox :label="child.id">{{ child.name }}</el-checkbox>
                </div>
            </el-checkbox-group>
        </div>
    </div>
    <div class="save">
        <el-button type="primary" @click="save">保存</el-button>
        <!-- 清空只需要把 数组里面的每个  checkedIs 清空，控制一个 checkAll 和半选 -->
        <el-button>清空</el-button>
    </div>
</template>

<script setup lang="ts">
import { user } from "@/api";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();

type ICategory = IResourceCategoryModel & {
    children: IRourceModel[];
    checkedIds: number[];
    checkAll: boolean;
    indeterminate: boolean;
};

interface IState {
    list: ICategory[];
}

const state = reactive<IState>({
    list: [],
});

// 全选
const checkAll = (item: ICategory) => {
    item.checkedIds = item.checkAll ? item.children.map((child) => child.id) : []
}
// 半选
const change = (item: ICategory) => {
    item.checkAll = item.checkedIds.length == item.children.length
    item.indeterminate = !item.checkAll && item.checkedIds.length !== 0;
}

const save = () => {
    ElMessageBox.confirm("确定要保存吗")
        .then(() => {
            // 发请求
            user
                .allocResourceApi({
                    roleId: parseInt(route.query.id as string),
                    // 这个参数就是 所有的 checkedIds 的总和  [1,2,3,4]
                    resourceIds: state.list
                        .map((item) => item.checkedIds)
                        .reduce((prev, cur) => {
                            return prev.concat(cur);
                        }, []),
                })
                .then((res) => {
                    ElMessage({
                        message: res.message,
                        type: res.code === 200 ? "success" : "error",
                    });
                });
        })
        .catch(() => { });
};


if (route.query.id) {
    Promise.all([user.getAllResourceCategoryApi(), user.getAllResourceApi(), user.getListRoleResourceApio(parseInt(route.query.id as string))]).then(
        ([res1, res2, res3]) => {
            // 请求成功了
            if (res1.code === 200 && res2.code === 200 && res3.code == 200) {
                // 分类
                // res1.data 里面的 子级
                // res2.data
                state.list = res1.data.map((item) => ({
                    ...item,
                    children: [],
                    checkedIds: [],
                    checkAll: false,
                    indeterminate: false
                }));
                res2.data.forEach((child) => {
                    const p = state.list.find((p) => p.id === child.categoryId);
                    p?.children.push(child);
                });


                // 要根据 res3 得到的 当前角色拥有的 资源，让 list[i].checkedIds 里面存着的是 res3.data 的id
                // list[i] == { id: number,  checkedIds : []}
                // res3.data == [ {id:number,categoryId : number} ]
                // 需要把 res3.data[j].id 放到  list[i].checkedIds 里面
                // 让 checked-group 里面的 多选勾选上
                state.list.forEach((item) => {
                    res3.data.forEach((child) => {
                        if (child.categoryId === item.id) {
                            item.checkedIds.push(child.id);
                        }
                    });
                });

                // 处理 list 里面的 数据的勾选状态
                state.list.forEach((item) => {
                    // 什么状态下是全选？
                    item.checkAll = item.checkedIds.length === item.children.length;
                    // 什么状态下，是半选？
                    item.indeterminate = !item.checkAll && item.checkedIds.length !== 0;
                });



            }
        }
    );
}
let { list } = toRefs(state)


</script>

<style scoped lang="less">
.title {
    padding: 10px;
    background-color: #f2f6fc;
}

.group {
    padding: 10px;

    .item {
        width: 33%;
    }
}

:deep(.el-checkbox-group) {
    display: flex;
    flex-wrap: wrap;
}

.save {
    display: flex;
    justify-content: center;
}
</style>